<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>订单发货</title>
	<script src="/vue/vue.js"></script>
	<script src="/axios/axios.min.js"></script>
	<script src="/qs/qs.min.js"></script>
	<script src="/elementui/index.js"></script>
	<link rel="stylesheet" href="/elementui/index.css">
	<style>
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}

	</style>
</head>
<body>
<div id="app">
	<el-button @click="printOrder" type="primary" >打印订单</el-button>
	<el-button @click="printShippingOrder" type="primary">打印发货单</el-button>
	<template>
		<el-table
				ref="currentPage"
				:data="orders"
				style="width: 100%"
				@select-all="selectAll"
				@current-change="handleSelectionChange">
			<el-table-column
					type="selection"
					width="55">
			</el-table-column>
				<el-table-column
						prop="id"
						label="序号">
				</el-table-column>
				<el-table-column
						prop="orderId"
						label="订单编号">
				</el-table-column>
				<el-table-column
						prop="allStatus"
						label="订单状态">
				</el-table-column>
				<el-table-column
						prop="companyName"
						label="会员名">
				</el-table-column>
				<el-table-column
						prop="pname"
						label="商品名称">
				</el-table-column>
				<el-table-column
						prop="number"
						label="商品数量">
				</el-table-column>
				<el-table-column
						prop="pickUpAmount"
						label="应收金额">
				</el-table-column>
				<el-table-column
						prop="money"
						label="实收金额">
				</el-table-column>
				<el-table-column
						prop="legal"
						label="收货人">
				</el-table-column>
				<el-table-column
						prop="companyAddress"
						label="收货地址">
				</el-table-column>
				<el-table-column
						prop="dealTime"
						label="下单时间">
				</el-table-column>
				<el-table-column
						prop="remark"
						label="订单备注">
				</el-table-column>
				<el-table-column label="操作"  width="180">
					<template slot-scope="scope">
						<div>
							<el-button type="primary" size="medium" @click="handleEdit(scope.row)">发货</el-button>
						</div>

					</template>
				</el-table-column>
			</el-table>
		</template>
	<!--分页-->
	<el-pagination
			background
			layout="prev, pager, next"
			@current-change="refreshData"
			:total="total"
			:current-page="current"
			:page-size="pageSize">
	</el-pagination>

	<el-dialog title="发货确认" :visible.sync="dialogFormVisible">
		<el-form :model="form" :inline="true">
			<el-row>
				<el-col :span="12">
					<el-form-item label="订单编号" :label-width="formLabelWidth">
						<el-input v-model="form.orderNum" autocomplete="off"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="发货单号" :label-width="formLabelWidth">
						<el-input v-model="form.shippingNum" autocomplete="off"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="12">
					<el-form-item label="配送方式：" :label-width="formLabelWidth">
					<el-select v-model="form.shippingMethodId" placeholder="请选择" @change="selectChange">
						<el-option
								v-for="item in logistics"
								:key="item.logisticsId"
								:label="item.logisticsName"
								:value="item.logisticsId">
						</el-option>
					</el-select>
				</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="车辆：" :label-width="formLabelWidth">
						<el-select v-model="form.shippingTruckId" placeholder="请选择">
							<el-option
									v-for="item in shippingTruck"
									:key="item.vehicleId"
									:label="item.vehicleName"
									:value="item.vehicleId">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="发货时间：" :label-width="formLabelWidth">
						<el-date-picker
								v-model="form.shippingDate"
								type="date"
								placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="司机姓名：" :label-width="formLabelWidth">
						<el-select v-model="form.driverId" placeholder="请选择">
							<el-option
									v-for="item in orderDriver"
									:key="item.driverId"
									:label="item.driverName"
									:value="item.driverId">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
	    	<el-col :span="12">
				<el-form-item label="司机电话：" :label-width="formLabelWidth">
					<el-select v-model="form.driverId" placeholder="请选择">
						<el-option
								v-for="item in orderDriver"
								:key="item.driverId"
								:label="item.driverControl"
								:value="item.driverId">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="车牌号：" :label-width="formLabelWidth">
					<el-select v-model="form.shippingTruckId" placeholder="请选择">
						<el-option
								v-for="item in shippingTruckId"
								:key="item.vehicleId"
								:label="item.numberPlate"
								:value="item.vehicleId">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			</el-row>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible = false">取 消</el-button>
			<el-button type="primary" @click="subDialog">确 定</el-button>
		</div>
	</el-dialog>
	<!--打印订单-->
	<el-dialog :title="distinguish" :visible.sync="orderDisplay" align="center" label-width="100px" >
		<el-form :model="tOrder" label-width="160px" :inline="true">
			<div>
				<table width="100%">
					<tr>
						<td>购货人：{{tOrder.orderHolder}}</td>
						<td>付款日期：{{tOrder.dealTime}}</td>
						<td>发货单号：{{tOrder.orderId}}</td>
					</tr>
					<tr>
						<td>交易时间：{{tOrder.dealTime}}</td>
						<td>发货时间：{{tOrder.shippingDate}}</td>
						<td>配送方式：{{tOrder.shippingMethodId}}</td>
					</tr>
					<tr>
						<td>支付方式:{{tOrder.payType}}</td>
						<td>手机:123456</td>
						<td>电话:123456</td>
					</tr>
					<tr>
						<td>收货地址:123456</td>
						<td>收货人：{{tOrder.orderHolder}}</td>
						<td>邮编:42300</td>
					</tr>
				</table>
			</div>
			<br><br><br>
			<div>
				<table border="1px" width="100%">
					<tr>
						<th>订单编号</th>
						<th>商品名称</th>
						<th>货号</th>
						<th>属性</th>
						<th>价格</th>
						<th>数量</th>
						<th>小计</th>
					</tr>
					<tr>
						<td>{{tOrder.orderId}}</td>
						<td>{{tOrder.tproduct.pname}}</td>
						<td>{{tOrder.tproduct.pnumber}}</td>
						<td>{{tOrder.tproduct.pkind}}</td>
						<td>{{tOrder.tproduct.pprice}}</td>
						<td>{{tOrder.number}}</td>
						<td>{{tOrder.money}}</td>
					</tr>
				</table>
			</div>
			<br><br><br>
			<div>
				<b style="margin-left: 100px">商品总金额：￥{{tOrder.tproduct.pprice * tOrder.number}}</b>
				<b style="margin-left: 200px">应付款：￥{{tOrder.tproduct.pprice * tOrder.number}}</b>
			</div>
			<br><br><br>
			<div>
				<b style="margin-left: 100px">打印时间：{{tOrder.productTime}}</b>
				<b style="margin-left: 100px">操作者：{{tOrder.operator}}</b>
			</div>
		</el-form>
		<div slot="footer" class="dialog-footer">
		<el-button @click="orderDisplay = false">打印</el-button>
		<el-button @click="orderDisplay = false">退出</el-button>
		</div>
	</el-dialog>

</div>
<script>

	new Vue({
		el:"#app",
		data() {
			return {
				orderDisplay:false,//空置打印订单显示
				dialogFormVisible: false,//控制对话框的显示
				orders:null,  //获取集合存入
				logistics:null,//所有的物流
				shippingTruck:null,//所有的车辆
				formLabelWidthInputBox:'80px',//输入框宽度
				formLabelWidth: '120px', //表单标签的宽度
				total:0,//总条数
				current:1,//当前条数
				pageSize:3, //每页条数
				form:{
					orderNum:null,//订单编号
					companyId:'',//客户id
					shippingDate:null,//发货时间
					shippingMethodId:null,//发货方式
					shippingNum:null,//发货单号
					shippingTruckId:null,//发货车辆id
					endPlace:null,//目的地
					driverId:null,//司机对应的id
				},
				multipleSelection:{//选择一行的值
					allStatus:null,
					companyAddress:null,
					companyName:null,
					customId:null,
					dealTime:null,
					id:null,
					legal:null,
					money:null,
					number:null,
					orderId:null,
					pickUpAmount:null,
					pname:null,
					remark:null
				},
				tOrder:{	//查询对应id的订单信息
						orderHolder:null,
						dealTime:null,
						orderId:null,
						shippingDate:null,
						shippingMethodId:null,
						payType:null,
						shippingMethodId:null,
						number:1,
						money:null,
						productTime:null,
						operator:null,
						tproduct:{	//查询编号对应的商品信息
							pprice:null,
							pname:null,
							pnumber:null,
							pkind:null,
						},
				},
				distinguish:null,  //用于区分功能
				orderDriver:null, //查询所有司机
			}
		},
		methods:{
			refreshData(current){ //查询所有数据的方法
				this.current = current;
				axios.get("/selectAllOrder?current="+this.current).then(value => {
					console.log(value);
					if (value.data.state==1){
						this.orders = value.data.data.records;
						this.total = value.data.data.total;
						this.pageSize = value.data.data.size;
						this.current = value.data.data.current;
					}
				})
			},
			//点击发货
			handleEdit(row){
				this.form.orderNum = row.orderId
				this.form.companyId = row.customId
				this.form.endPlace= row.companyAddress
				axios.get('/Logistics').then(res=>{
					this.logistics = res.data.data
				})
				this.dialogFormVisible = true
			},
			selectChange(){//查询所有车辆
				axios.get('/vehicle/logisticsID/'+this.form.shippingMethodId).then(res=>{
					this.shippingTruck = res.data.data
				})
				axios.get('/blb/order/list').then(res=>{  //查询所有司机
					if (res.data.state==1){
						this.orderDriver = res.data.data
					}
				})
			},
			subDialog(){
				axios.post('/Shipping',this.form).then(res=>{  //添加车辆
					console.log(res);
					if (res.data.state==1){
						this.dialogFormVisible = false
						this.form.orderNum=null
						this.refreshData(1)
					}
				})
			},
			printOrder(){//打印订单
				if(this.multipleSelection.id!=null) {
					this.orderDisplay = true  //显示弹出框
					this.distinguish = "打印订单"
					axios.post("/t-order/list/" + this.multipleSelection.id).then(res => { //查询对应订单
						if (res.data.state == 1) {
							this.tOrder = res.data.data;
							console.log(this.tOrder)
						}
						var date = new Date(this.tOrder.dealTime);
						this.tOrder.dealTime=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
						var date = new Date(this.tOrder.productTime);
						this.tOrder.productTime=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
						var date = new Date(this.tOrder.shippingDate);
						this.tOrder.shippingDate=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();//时间格式设置
					})
				}else {
					this.$message("请选择订单!")
				}
			},
			printShippingOrder(){//打印发货单
				if(this.multipleSelection.id!=null) {
					this.orderDisplay = true  //显示弹出框
					axios.post("/t-order/list/" + this.multipleSelection.id).then(res => { //查询对应订单
						if (res.data.state == 1) {
							this.tOrder = res.data.data;
							this.distinguish = res.data.data.companyName + "公司发货单";
						}
						var date = new Date(this.tOrder.dealTime);
						this.tOrder.dealTime=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
						var date = new Date(this.tOrder.productTime);
						this.tOrder.productTime=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
						var date = new Date(this.tOrder.shippingDate);
						this.tOrder.shippingDate=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();//时间格式设置
					})
				}else{
					this.$message("请选择订单!")
				}
			},
			selectAll() {//取消全选
				this.$refs.currentPage.clearSelection();
			},
			handleSelectionChange(row) {//选择框的方法
				this.current = row; //只能选择一个

				this.$refs.currentPage.clearSelection(); //清空选项

				this.$refs.currentPage.toggleRowSelection(row);//选中当前行

				this.multipleSelection=row; //存储数据到其中

			}
		},

		mounted(){//vue挂载
			this.refreshData(1);
		}
	});

</script>
</body>
</html>